import { useState } from "react"
import DailyHexagram from "@/pages/DailyHexagram"
import Bazi from "@/pages/Bazi"
import Horoscope from "@/pages/Horoscope"
import "./index.scss"

interface TabItem {
  name: string
  component: React.ComponentType
}

export default function Page() {
  const [activeTab, setActiveTab] = useState(0)

  const tabs = [
    { name: "金钱卦", component: DailyHexagram },
    { name: "八字排盘", component: Bazi },
    { name: "星座运势", component: Horoscope },
  ]

  const ActiveComponent = tabs[activeTab].component

  return (
    <div className="app">
      <div className="content">
        <ActiveComponent />
      </div>

      <div className="tabbar">
        {tabs.map((tab, index) => (
          <button
            key={index}
            className={`tab-item ${activeTab === index ? "active" : ""}`}
            onClick={() => setActiveTab(index)}
          >
            <div className="tab-icon">
              {index === 0 && "🔮"}
              {index === 1 && "📊"}
              {index === 2 && "⭐"}
            </div>
            <span className="tab-text">{tab.name}</span>
          </button>
        ))}
      </div>
    </div>
  )
}